<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-06 16:08:58
-->
<template>
  <div ref="bottomContainer" id="bottomContainer" style="height: 95%">
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
import moment from "moment";
import _ from 'lodash'
// 导入图表
import { DualAxes } from '@antv/g2plot';
export default {
  data() {
    return {
       params: {
        page: 1,
        pageSize: 100,
      },
      todayData: [],
      dualAxes: null,
    };

  },
  computed: {
    //计算属性
    // 取出date,pm2.5,pm1.0
    chartData() {
      return this.todayData.map((item) => {
        return {
          date: moment(item.insert_time).format("hh:mm"),
          超细颗粒物: parseInt(item.pm10),
          细颗粒物:parseInt(item.pm25),
        };
      });
    },
  },
  methods: {
    queryTodayData() {
      get("/dashboard/pageQueryTodayData", this.params).then((res) => {
        this.todayData = res.data.list;
        this.initChart();
      });
    },
  
    initChart() {
      // 数组去重
      const chartData = _.uniqBy(this.chartData, 'date')
      console.log(chartData);
      // 1.初始化图表实例，配置配置项
      this.dualAxes = new DualAxes("bottomContainer", {
        data:[chartData,chartData],
        xField: "date",
        yField: ["超细颗粒物","细颗粒物"],
        // x轴配置项
        xAxis: {
          range: [0, 1],
          label: {
            style: {
              fill: "white",
            },
          },
        },
        // y轴配置项
        yAxis: {
        超细颗粒物: {
      grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
      label:{
        style:{
          fill:'white'
        }
      },
      
    },

    细颗粒物: {
        grid: {
            line: {
              // 设置辅助线样式
              style: {
                lineDash: [2, 3], // 虚线配置，第一个值为虚线每个分段的长度，第二个值为分段
                strokeOpacity: 0.2, // 辅助线透明度
              },
            },
          },
      label:{
        style:{
          fill:'white'
        }
      },
     
    }   
          
        },
        // 悬浮提示
        tooltip: {
          domStyles: {
            "g2-tooltip": {
              // 背景框样式
              padding: "10px",
              background: "rgba(33, 81, 207, 0.8)",
              border: "1px solid #00FFFF",
              color: "#FFFFFF",
              fontFamily: "微软雅黑",
            },
          },
        },
        geometryOptions: [
    {
      geometry: 'line',
      color: '#5B8FF9',
    },
    {
      geometry: 'line',
      size: 3,
      color: '#5AD8A6',
    },
  ],
      });
      // 2.执行绘画渲染
      this.dualAxes.render();

    },
  },
  // vue实例完全挂载到页面上
  created() {
    this.queryTodayData();
  },
}
</script>


